<template>
  <div class="approvals-container">
    <div class="app-container">
      <h2>
        审批
      </h2>

      <!-- 页面中一个按钮 点击显示一个p标签  p标签显示后, 的文本变为红色 -->
      <button @click="changeFlag">按钮</button>
      <p v-if="flag" ref="p">我是一个文本</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Approvals',
  data() {
    return {
      flag: false
    }
  },
  beforeUpdate() {
    // console.log('数据发生变化了')
    // console.log(this.$refs.p)
  },
  updated() {
    // console.log('视图变化了')
    // console.log(this.$refs.p)
    // this.$refs.p.style.color = 'red'
  },
  methods: {
    async changeFlag() {
      this.flag = true
      // 等dom更新完毕后会触发的钩子$nextTick
      /* this.$nextTick(() => {
        this.$refs.p.style.color = 'red'
      }) */
      // console.log(this.$nextTick())
      await this.$nextTick()
      this.$refs.p.style.color = 'red'
    }
  }
}
</script>

<style>

</style>
